<div class="ui-g" [@flyIn]="'active'">
  <div class="ui-g-12">
    <div class="button-item border-spe-bottom">
      <button pButton type="text" class="ui-button-danger" icon="fa fa-times" *ngIf="selectedDict"
        (click)="delete($event)" label="删除"></button>
      <button pButton type="text" class="ui-button-warning" icon="fa fa-pencil-square-o" *ngIf="selectedDict"
        (click)="update($event)" label="修改"></button>
      <button pButton type="text" class="ui-button-info" icon="fa fa-plus" (click)="add($event)" label="新增"></button>

    </div>

    <div class="content-item">
      <p-table #dt [columns]="cols" [value]="showItems" [scrollable]="true" scrollHeight="'calc(100% - 100px)'"
        selectionMode="single" [(selection)]="selectedDict" [paginator]="showItems && showItems.length > 30"
        [rows]="30">
        <ng-template pTemplate="caption">
          <div style="text-align: right">
            <i class="fa fa-search" style="margin:4px 4px 0 0"></i>
            <input type="text" pInputText size="50" placeholder="请输入关键字筛选..."
              (input)="dt.filterGlobal($event.target.value, 'contains')" style="width:auto">
          </div>
        </ng-template>
        <ng-template pTemplate="header" let-columns>
          <tr>
            <th *ngFor="let col of columns" [ngStyle]="col.style">
              {{col.header}}
            </th>
          </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowData let-columns="columns">
          <tr [pSelectableRow]="rowData">
            <td *ngFor="let col of columns" [ngStyle]="col.style">
              {{rowData[col.field]}}
            </td>
          </tr>
        </ng-template>
      </p-table>
    </div>
  </div>
</div>